<template>
    <div class="temp">
        <!--商品详情轮播图-->
        <div id="slider">
            <slider class="slider" :imgs="list"></slider>
        </div>
        <div class="buy">
            <div class="title" v-text="goods.title"></div>
            <div class="price">
                <span>市场价：<i>￥{{goods.market_price}}</i></span><span>销售价：<i>￥{{goods.sell_price}}</i></span></div>
            <div class="count">购买数量：
                <div class="option">
                    <inputNum @sendCount="getCount"></inputNum>
                    <!--动画小球-->
                    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                        <div class="ball" v-if="isshow"></div>
                    </transition>
                </div>
            </div>
            <div>
                <mt-button type="danger">立即购买</mt-button>
                <mt-button type="primary" @click="toShopCar">加入购物车</mt-button>
            </div>
        </div>
        <div class="desc">
            <h5>商品参数</h5>
            <div>
                <p>商品货号：{{goods.goods_no}}</p>
                <p>库存情况：{{goods.stock_quantity}}</p>
                <p>上架情况：{{goods.add_time | datefmt('YYYY-MM-DD')}}</p>
            </div>
        </div>
        <div class="other">
            <router-link v-bind="{to:'/goods/goodsdesc/' + goodsid}">
                <mt-button type="primary" size="large" plain id="produce">图文介绍</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/' + goodsid}">
                <mt-button type="danger" size="large" plain>商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>

<script>
    import common from "../../kits/common"
    import {Toast} from 'mint-ui'
    import slider from "../subcom/slider.vue"
    import inputNum from "../subcom/inputNum.vue"
    import {vm, COUNTSTR} from "../../kits/vm"
    import {KEY, setItem, goodObj} from "../../kits/storeData"
    export default {
        data(){
            return {
                goodsid: 0,
                list: [],
                goods: {},
                count: 1,
                isshow:false
            }
        },
        created() {
            this.goodsid = this.$route.params.goodsid;
            this.getlist();
            this.getgoods();
        },
        methods: {
            getlist(){
                const url = common.apidomain + "/api/getthumimages/" + this.goodsid;
                this.$http.get(url).then((response) => {
                    let body = response.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return;
                    }
                    this.list = body.message;
                })
            },
            getgoods() {
                const url = common.apidomain + "/api/goods/getinfo/" + this.goodsid;
                this.$http.get(url).then((response) => {
                    let body = response.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return;
                    }
                    this.goods = body.message[0];
                })
            },
            getCount(count) {
                this.count = count;
            },
            toShopCar() {
                vm.$emit(COUNTSTR, this.count);
                //添加数据到localstorage
                goodObj.id = this.goodsid;
                goodObj.count = this.count;
                setItem(goodObj);
                //设置小球的动画
                this.isshow = !this.isshow;
            },
            beforeEnter(el) {
                el.style.transform = 'translate(0,0)'
            },
            enter(el,done) {
                el.offsetWidth;
                el.style.transform = 'translate(60px,380px)'
                done();
            },
            afterEnter(){
                this.isshow = !this.isshow;
            }

        },
        components: {
            slider, inputNum
        }
    }
</script>

<style scoped>
    .temp {
        padding: 0 5px;
    }

    #slider, .buy, .desc, .other {
        border: 1px solid #e2e4e4;
        border-radius: 10px;
        margin-top: 10px;
    }

    .buy {
        padding: 5px;
    }

    .buy .title {
        color: #26d0ff;
        font-size: 18px;
        line-height: 1.5em;
        border-bottom: 1px solid #e2e4e4;
    }

    .buy .price {
        font-size: 16px;
        line-height: 1.2em;
        margin-top: 5px;
    }

    .buy .price i {
        font-style: normal;
    }

    .buy .price span:first-child i {
        text-decoration: line-through;
    }

    .buy .price span:last-child {
        margin-left: 20px;
    }

    .buy .price span:last-child i {
        font-size: 18px;
        color: red;
    }

    .buy .option {
        display: inline-block;
    }

    .count {
        height: 30px;
        margin: 10px 0;
    }

    .count .option {
        display: inline-block;
        position: relative;
    }

    .buy div:last-child {
        margin-bottom: 10px;
    }

    .ball {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: 0px;
        left: 50%;
        margin-left: -10px;
        transition: all .5s ease;
        z-index: 100;
    }

    .desc h5 {
        line-height: 1.5em;
        border-bottom: 1px solid #e2e4e4;
        padding-left: 5px;
    }

    .desc > div {
        margin-top: 5px;
        padding: 10px;
        position: relative;
    }

    .other {
        padding: 10px 5px;
        margin-bottom: 5px;
    }

    .other #produce {
        margin-bottom: 20px;
    }
</style>